<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div class="app-page-split">
    <div style="width: 300px;" class="lg-hide-s1">
      <org-tree
        v-model:actived="orgActived"
        activable
        :prepend="{ value: '', label: '全部' }"
        @load="onLoad"
        @active="onLoad"
      />
    </div>
    <div class="gl-flex-1 gl-pd0">
      <lg-table :schema="schema" v-bind="tableProps">
        <!-- 工具栏 -->
        <template #toolbar-left>
          <lg-button-list :limit="$ToolBtnLimit">
            <btn-tool-add v-if="has('create')" @click="editRef.open({ orgId: orgActived[0] })" />
            <btn-tool-remove v-if="has('remove')" @click="remove()" />
            <btn-tool-export v-if="has('export')" @click="exports" />
            <btn-tool-import v-if="has('import')" @click="imports" />
            <a v-if="has('role')" @click="roleModelRef.open(selectedKeys)">分配角色</a>
            <a title="清空数据缓存" @click="clearCache">清空缓存</a>
            <template #trigger><btn-tool-more /></template>
          </lg-button-list>
        </template>
        <!-- 操作栏 -->
        <template #actionbar="{ row }">
          <lg-button-list :limit="$RowBtnLimit">
            <btn-row-view @click="detailRef.open(row)" />
            <btn-row-update v-if="has('update')" @click="editRef.open({ id: row.id })" />
            <a v-if="has('role')" @click="roleModelRef.open(row.id)">分配角色</a>
            <btn-row-remove v-if="has('remove')" @click="remove(row.id)" />
          </lg-button-list>
        </template>
        <!-- 插槽 -->
      </lg-table>
    </div>
  </div>
  <edit ref="editRef" @ok="reload()" />
  <detail ref="detailRef" />
  <role-model ref="roleModelRef" @ok="clearSelection" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TableContainer } from '@/components';
import { LgButtonList, LgTable, useAuth, useTable } from '@/soar';
import schema from './schema';
import api from './api';
import Edit from './Edit.vue';
import Detail from './Detail.vue';
import RoleModel from './RoleModel.vue';
import OrgTree from '@/pages/auth/org/TreeView.vue';

// 使用表格
const { has } = useAuth();
const editRef = ref();
const detailRef = ref();
const roleModelRef = ref();
const orgActived = ref([]);

const { exports, imports, remove, reload, clearSelection, tableProps, selectedKeys } = useTable<any>({
  api: {
    ...api,
    query: (params: any) => {
      params.$soarQuery['orgId-eq'] = orgActived.value[0];
      return api.query(params);
    },
  },
  props: {
    orderBys: ['id'],
    actionbar: {
      width: 100,
    },
    immediate: false,
  },
});

function onLoad(e) {
  orgActived.value = e;
  setTimeout(() => reload(1), 500);
}

function clearCache() {
  api.clearCache();
}
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
